<template>
  <div style="position: relative; z-index: 100;" class="spacing_widget">
    <el-input-number v-model="form.top" controls-position="right" :min="0" :max="1000" :controls="false"
                     style="display: block; margin: 0 auto;width: 68px" @change="handleChange" :class="{'selected': selected}" />
    <div style="text-align: center; margin: 16px 0;">
      <el-input-number v-model="form.left" controls-position="right" :min="0" :max="1000"
                       :controls="false" style="width: 68px" @change="handleChange" :class="{'selected': selected}" />
      <span class="spacing_widget spacing_widget__link" @click="handleSelect">
        <span class="sds-icon sds-icon-lock-theme">
          <svg
              viewBox="0 0 16 16" focusable="false" data-icon="lock-theme" width="1em" height="1em" fill="currentColor"
              aria-hidden="true"><path
              d="M4.53 16a4.5 4.5 0 01-3.2-1.33 4.54 4.54 0 010-6.41l1.96-1.97a1 1 0 011.42 1.42L2.74 9.67a2.54 2.54 0 000 3.59 2.6 2.6 0 003.59 0l1.96-1.97a1 1 0 011.42 1.42l-1.97 1.96A4.5 4.5 0 014.54 16zM12 10a1 1 0 01-.7-1.7l1.96-1.97a2.54 2.54 0 000-3.59 2.6 2.6 0 00-3.59 0L7.71 4.71a1 1 0 11-1.42-1.42l1.97-1.96A4.5 4.5 0 0111.46 0a4.5 4.5 0 013.21 1.33 4.54 4.54 0 010 6.41l-1.96 1.97a1 1 0 01-.7.29zm-6 1a1 1 0 01-.7-1.7l4-4a1 1 0 011.4 1.4l-4 4a1 1 0 01-.7.3z"></path></svg>
        </span>
      </span>
      <el-input-number v-model="form.right" controls-position="right" :min="0" :max="1000"
                       :controls="false" style="width: 68px" @change="handleChange" :class="{'selected': selected}" />
    </div>
    <el-input-number v-model="form.bottom" controls-position="right" :min="0" :max="1000"
                     :controls="false" style="display: block; margin: 0 auto;width: 68px"  @change="handleChange" :class="{'selected': selected}" />
    <div class="spacing_widget__border"></div>
  </div>
</template>

<script>
export default {
    name: 'ele-spacing',
    props: {
        value: {
            type: Object,
            default: () => ({
                top: 0,
                left: 0,
                right: 0,
                bottom: 0
            })
        }
    },
    data () {
        return {
            selected: false,
            form: this.value
        };
    },
    watch: {
        value (newVal) {
            this.form = newVal;
        },
        form: {
            handler (val, oldVal) {
                this.$emit('input', val);
            },
            deep: true
        }
    },
    methods: {
        handleSelect () {
            this.selected = !this.selected;
        },
        handleChange (val) {
            if (this.selected) {
                ['top', 'left', 'right', 'bottom'].forEach(prop => {
                    this.$set(this.form, prop, val);
                });
            }
        }
    }
};
</script>

<style lang="scss">
.spacing_widget__link {
  height: 30;
  width: 30;
  padding: 7px;
  margin: 0 34px;
  background: #F7F8FB;
  border-radius: 2px;
  cursor: pointer;
  z-index: 100;
}

.spacing_widget__border {
  position: absolute;
  height: 94px;
  width: 178px;
  border-radius: 2px;
  border: 1px dashed #ccc;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -10;
}

.el-input-number.selected input {
  border-color: #4D74ED;
}

</style>
